<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表的过滤</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 遍历数组 -->
        <h3>人员列表</h3>
        <input type="text" placeholder="请输入名字" v-model="keyWord"/>
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        // 使用watch实现
        //#region
        // var vm = new Vue({
        //    el:'#app',
        //    data:{
        //        keyWord: '',
        //        persons: [
        //            {id: '001',name: '马冬梅',age: 19,sex: '女'},
        //            {id: '002',name: '周冬雨',age: 20,sex: '女'},
        //            {id: '003',name: '周杰伦',age: 21,sex: '男'},
        //            {id: '004',name: '温兆伦',age: 22,sex: '男'}
        //        ],
        //        filPersons: []
        //    },
        //    methods:{},
        //    watch: {
        //        keyWord: {
        //            immediate: true,// 初始化是否调用
        //            handler(val){
        //              this.filPersons=this.persons.filter((p)=>{
        //                return p.name.indexOf(val)!=-1;
        //              });
        //            }
        //        }
        //    }
        // });
        //#endregion
        
        //使用computed实现
        var vm = new Vue({
           el:'#app',
           data:{
               keyWord: '',
               persons: [
                   {id: '001',name: '马冬梅',age: 19,sex: '女'},
                   {id: '002',name: '周冬雨',age: 20,sex: '女'},
                   {id: '003',name: '周杰伦',age: 21,sex: '男'},
                   {id: '004',name: '温兆伦',age: 22,sex: '男'}
               ]
           },
           methods:{},
           computed: {
            filPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord)!=-1;
                });
            }
           }
        });
    </script>
</body>

</html>